// 演示
<template>
  <div class="common-layout" style="height: 600px">
    <el-container style="height: 600px">
      <el-aside style=" padding-left: 20px; padding-top: 10px; display: flex; flex-direction: column; " >
        <el-row>
          <span>Enable Multiple Select</span>
          <el-switch
            v-model="isEnableMultipleSelect"
            class="ml-2"
            @change="isEnableMultipleSelectChange"
          />          
        </el-row>
        <el-row>
          <span>Selection Movable</span>
          <el-switch
            v-model="isSelectionMovable"
            class="ml-2"
            @change="isSelectionMovableChange"
          />          
        </el-row>
        <el-row>
          <span>Enable Rubberband</span>
          <el-switch
            v-model="isEnableRubberband"
            class="ml-2"
            @change="isEnableRubberbandChange"
          />          
        </el-row>
        <el-row>
          <span>Is Strict Contains</span>
          <el-switch
            v-model="isStrictContains"
            class="ml-2"
            @change="isStrictContainsChange"
          />          
        </el-row>
        <el-row>
          <span>Modifier Key</span>
          <el-checkbox-group
            v-model="checkedModifierKeys"
            @change="handleCheckedModifierKeys"
          >
            <el-checkbox v-for="modifierKey in modifierKeys" :key="modifierKey" :label="modifierKey" :value="modifierKey">
              {{ modifierKey }}
            </el-checkbox>
          </el-checkbox-group>
        </el-row>

        <el-row>
          <el-checkbox v-model="isAddCustomClassName" @change="isAddCustomClassNameChange"  label="Add custom className(my-selection)" size="large" />
        </el-row>
        <el-row>
          <el-checkbox v-model="isAddFilter" @change="isAddFilterChange" label="Add filter (exclude circle)" size="large" />
        </el-row>
        <el-row>
          <el-checkbox v-model="isAddContent" @change="isAddContentChange" label="Add content(display selected count)" size="large" />
        </el-row>
      </el-aside>
      <el-main style="height: 600px">
        <div id="container"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph, DataUri, Shape } from "@antv/x6";
import { onMounted, ref } from "vue";

let graph = null;

const isEnableMultipleSelect = ref(true)
const isSelectionMovable = ref(true)
const isEnableRubberband = ref(true)
const isStrictContains = ref(true)
const modifierKeys = ['alt', 'ctrl', 'shift']
const checkedModifierKeys = ref(['alt','meta'])
const isAddCustomClassName = ref(true)
const isAddFilter = ref(true)
const isAddContent = ref(true)

const isEnableMultipleSelectChange = (value : boolean) => {
  selectionPropertyChange();
};

const isSelectionMovableChange = (value : boolean) => {
  selectionPropertyChange();
};

const isEnableRubberbandChange = (value : boolean) => {
  selectionPropertyChange();
};

const isStrictContainsChange = (value : boolean) => {
  selectionPropertyChange();
};

const handleCheckedModifierKeys = (value : boolean) => {
  selectionPropertyChange();
};


const isAddCustomClassNameChange = (value : boolean) => {
  selectionPropertyChange();
};

const isAddFilterChange = (value : boolean) => {
  selectionPropertyChange();
};

const isAddContentChange = (value : boolean) => {
  selectionPropertyChange();
};


const selectionPropertyChange = () => {
  if(isEnableMultipleSelect?.value) {
    graph.enableMultipleSelection();
  } else {
    graph.disableMultipleSelection();
  }
  if(isSelectionMovable?.value) {
    graph.enableSelectionMovable();
  } else {
    graph.disableSelectionMovable();
  }
  if(isEnableRubberband?.value) {
    graph.enableRubberband();
  } else {
    graph.disableRubberband();
  }
  if(isStrictContains?.value) {
    graph.enableStrictRubberband();
  } else {
    graph.disableStrictRubberband();
  }
  if(checkedModifierKeys?.value?.length > 0) {
    graph.setRubberbandModifiers(checkedModifierKeys?.value)
  } else {
    // 默认值
    graph.setRubberbandModifiers([])
  }
};




      // ElMessage({
      //   message: "粘贴失败",
      //   type: "error",
      // });





const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    grid: true, // 网格大小 10px，并绘制网格
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
    // 画布平移关闭
    panning: false,
    selecting: {
      enabled: true,
      multiple: isEnableMultipleSelect?.value,
      rubberband: isEnableRubberband?.value,
      movable: isSelectionMovable?.value,
      strict: isStrictContains?.value,
      showNodeSelectionBox: true,
    }
  });

  //创建流程图数据
  const data = {
    //节点数据
    nodes: [
      {
        id: "node1",
        shape: "rect",
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: "hello",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
      {
        id: "node2",
        shape: "rect",
        x: 160,
        y: 180,
        width: 100,
        height: 40,
        label: "world",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
    ],
  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>

<style scoped>
@import "../../assets/elementPlusDemo.css";
</style>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
}
</style>
